//厦门大学计算机专业 | 前华为工程师
//专注《零基础学编程系列》  http://lblbc.cn/blog
//包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
//公众号：蓝不蓝编程
import { formatSeconds2HMS } from '../../utils/util.js';

var hours = Array.from({ length: 10 }, (_, index) => index)
var minutes = Array.from({ length: 60 }, (_, index) => index)
var seconds = Array.from({ length: 60 }, (_, index) => index)
var interval = 0
var isStarted = false
var totalSeconds = 0
var remainingSeconds = totalSeconds
var progress = 100


Page({
  data: {
    hours,
    minutes,
    seconds,
    displayTime: '',
    value: [0, 0, 0],
    startPauseButtonText: '开始',
    showPicker: false, // 控制 picker-view 显示
    presetTimes: [ // 更新为对象数组，包含友好文本和实际值
      { text: '10分钟', value: 600 },
      { text: '30分钟', value: 1800 },
      { text: '1小时', value: 3600 },
      { text: '自定义', value: -1 }, // 自定义选项
    ],
  },
  onReady: function (e) {
    this.canvasContext = wx.createCanvasContext('myCanvas', this);
    this.updateProgress();
    this.setData({
      displayTime: formatSeconds2HMS(remainingSeconds)
    })
  },
  // 选择时间
  selectTime: function (e) {
    this.resetTimer()//重置操作，如果正在倒计时，则停止
    const seconds = parseInt(e.currentTarget.dataset.time);
    if (seconds === -1) {
      var showPicker = !this.data.showPicker
      this.setData({
        showPicker: showPicker
      });
    } else {
      this.onTimeSelect(seconds)
      this.setData({
        showPicker: false
      });
    }
  },
  onTimeSelect(seconds) {
    remainingSeconds = seconds
    totalSeconds = seconds
    this.updateProgress()
    this.setData({
      displayTime: formatSeconds2HMS(seconds)
    })
  },
  bindTimePickerChange(e) {
    const val = e.detail.value
    var seconds = this.data.hours[val[0]] * 3600 + this.data.minutes[val[1]] * 60 + this.data.seconds[val[2]]
    this.onTimeSelect(seconds)
  },
  startOrPauseTimer() {
    if (isStarted) {
      if (interval != 0) {
        clearInterval(interval)
        interval = 0
      }
      this.setData({
        startPauseButtonText: '开始'
      })
    } else {
      this.setData({
        startPauseButtonText: '暂停'
      })

      if (interval == 0) {
        interval = setInterval(() => {
          if (remainingSeconds > 0) {
            remainingSeconds--
            this.setData({
              displayTime: formatSeconds2HMS(remainingSeconds)
            })
            this.updateProgress()
            if (remainingSeconds == 0) {
              this.showModal()
            }
          } else {
            this.resetTimer()
          }
        }, 1000)
      }
    }

    isStarted = !isStarted
  },
  resetTimer() {
    if (interval != 0) {
      clearInterval(interval)
      interval = 0
    }
    remainingSeconds = 0
    isStarted = false
    this.setData({
      displayTime: formatSeconds2HMS(0),
      startPauseButtonText: '开始'
    })
  },
  showModal() {
    wx.showModal({
      title: '提示',
      content: '时间到啦！',
      showCancel: false, // 不显示取消按钮，只显示一个按钮
      confirmText: '确定'
    });

    wx.vibrateLong();
  },
  updateProgress() {
    progress = remainingSeconds * 100 / totalSeconds
    const context = this.canvasContext;
    const centerX = 100; // 圆心的x坐标
    const centerY = 100; // 圆心的y坐标
    const radius = 80; // 圆环的半径
    const lineWidth = 10; // 圆环的线宽

    // 绘制圆环的背景
    context.setStrokeStyle('#ccc'); // 设置背景颜色
    context.setLineWidth(lineWidth);
    context.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
    context.stroke();

    if (progress > 0) {
      // 计算进度的角度
      let angle = Math.PI * 2 * progress / 100 - Math.PI / 2; // 角度

      // 绘制进度条
      context.setStrokeStyle('#8CB3F9'); // 设置进度条颜色
      context.setLineWidth(lineWidth);
      context.beginPath();
      context.arc(centerX, centerY, radius, -Math.PI / 2, angle, false);
      context.setLineCap("round");
      context.stroke();
    }

    // 将绘制的内容显示出来
    context.draw();
  }
})